<template>
    <div>
       <h2>每日访客统计</h2>
       <div id="two">
       </div>
    </div>
    </template>
    <script setup lang="ts">
        import { onMounted } from 'vue'
        import * as echarts from 'echarts';
        import link from '../api/link.js'

        type EChartsOption = echarts.EChartsOption;
        var option: EChartsOption;

        onMounted(() => {
            var chartDom = document.getElementById('two')!;
            var myChart = echarts.init(chartDom);

            link('/chartDataTwo').then(res => {
                let ydata = res.data.num
                let xdata = res.data.day

                option = {
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xdata
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '一般访客',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(128, 255, 165)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(1, 191, 236)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: ydata['一般访客']
                        },
                        {
                            name: "外卖",
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(0, 221, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(77, 119, 255)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: ydata['外卖']
                        },
                        {
                            name: '快递',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(55, 162, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(116, 21, 219)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: ydata['快递']
                        },
                        {
                            name: '授权访客',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(255, 0, 135)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(135, 0, 157)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: ydata['授权访客']
                        }
                    ]
                };

                option && myChart.setOption(option);

            })
        })
    </script>
    <style scoped>
     h2{
         /* 48像素 */
         height: 0.6rem;
         color: #fff;
         line-height: 0.6rem;
         text-align: center;
         font-size: 0.25rem;
    
     }
     #two{
         /* 高度360 */
         height: 4.0667rem
     }
    </style>